<!--  -->
<template>
  <div class="banner container" :id="otherId">
      <div class="left">
        <img :src="imgSrc" alt="">
        <h1>{{goodsTitle}}</h1>
      </div>
      <div class="right">
        <span></span>
      </div>
    </div>
</template>

<script>
export default {
  name:'Pettabbar',
  props:["goodsTitle","imgSrc","otherId"],
  data () {
    return {
    };
  },
}

</script>
<style lang='less' scoped>
@import '../../assets/css/total.less';
.banner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top:20px;
  padding: 10px 0;
  background-color: #ccd8d8;
  .left{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 30px;
    img{
      width: 50px;
      height: 50px;
      margin-left: 20px;
    }
  }
  .right{
    margin-right:20px ;
    cursor: pointer;
    color: rgb(65, 59, 59);
  }
}

</style>